<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 标题 -->
    <title>小兔鲜儿-新鲜、惠民、快捷！</title>
    <!-- seo相关 -->
    <meta name="description" content="小兔鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台。">
    <meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物">
    <!-- 图标 -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <!-- 引入css样式 -->
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
</head>











<body>
    <!-- 头部模块 -->
    <header>
        <!-- 快捷菜单模块 -->
        <div class="xtx-shortcut">
            <!-- 版心的盒子 -->
            <nav class="container">
                <!--导航条--> <!-- ul>(li>a)*7 -->
                <ul class="fr">
                    <li><a href="">请先登录</a>|</li>
                    <li><a href="">免费注册</a>|</li>
                    <li><a href="">我的订单</a>|</li>
                    <li><a href="">会员中心</a>|</li>
                    <li><a href="">帮助中心</a>|</li>
                    <li><a href="">在线客服</a>|</li>
                    <li><a href="">手机版</a></li>
                </ul>
            </nav>
        </div>
        <!-- 主导航模块 -->
        <div class="xtx-main-nav container">
            <!-- logo 向左浮动-->
            <div class="logo fl">
                <a href="">小兔鲜</a>
            </div>

            <!-- 导航栏 向左浮动 -->
            <nav class="fl">
                <!-- ul>(li>a)*9 -->
                <ul>
                    <li><a href="">首页</a></li>
                    <li><a href="">生鲜</a></li>
                    <li><a href="">美食</a></li>
                    <li><a href="">餐厨</a></li>
                    <li><a href="">电器</a></li>
                    <li><a href="">居家</a></li>
                    <li><a href="">洗护</a></li>
                    <li><a href="">孕婴</a></li>
                    <li><a href="">服装</a></li>
                </ul>
            </nav>

            <!-- 搜索框 向左浮动 -->
            <div class="search fl">
                <input type="search" placeholder="搜一搜">
            </div>

            <!-- 购物车 向左浮动 -->
            <div class="cart fl">
                <span>2</span>
            </div>
        </div>
    </header>



















    <!-- 网站入口 -->
    <div class="xtx-entry">
        <!-- 版心 -->
        <div class="container">
            <!-- 轮播图 -->
            <!-- ul>li>a>img -->
            <ul class="banner">
                <li>
                    <a href="">
                        <img src="./uploads/banner_1.png" alt="">
                    </a>
                </li>
            </ul>

            <!-- 商品分类侧边栏 -->
            <aside class="category">
                <!-- ul>(li>a)*10 -->
                <ul>
                    <li><a href="">生鲜 <span>水果</span><span>蔬菜</span></a></li>
                    <li><a href="">美食 <span>面点</span><span>干果</span></a></li>
                    <li><a href="">餐厨 <span>数码产品</span></a></li>
                    <li><a href="">电器 <span>床品</span><span>四件套</span><span>被枕</span></a></li>
                    <li><a href="">居家 <span>奶粉</span><span>玩具</span><span>辅食</span></a></li>
                    <li><a href="">洗护 <span>洗发</span><span>洗护</span><span>美妆</span></a></li>
                    <li><a href="">孕婴 <span>奶粉</span><span>玩具</span></a></li>
                    <li><a href="">服饰 <span>女装</span><span>男装</span></a></li>
                    <li><a href="">杂货 <span>户外</span><span>图书</span></a></li>
                    <li><a href="">品牌 <span>品牌制造</span></a></li>
                </ul>
            </aside>

            <!-- 左右按钮 -->
            <a href="" class="prev"></a>
            <a href="" class="next"></a>

            <!-- 轮播图指示器 -->
            <ol class="indicator">
                <li></li>
                <li></li>
                <li class="active"></li>
                <li></li>
                <li></li>
            </ol>
        </div>
    </div>

    <!-- 新鲜好物模块 -->
    <div class="xtx-new-goods container">
        <!-- 新鲜好物模块头部 -->
        <div class="goods-hd">
            <!-- 左边的文字 -->
            <h2 class="fl">
                新鲜好物 <span>新鲜出炉 品质靠谱</span> 
            </h2>
            <!-- 右边的文字 -->
            <a  class="fr" href="">查看全部</a>
        </div>
        <!-- 新鲜好物模块列表 -->
        <ul class="goods-list">
            <li>
                <a href="">
                    <img src="./uploads/new_goods_1.jpg" alt="">
                    <h3>睿米无线吸尘器F8</h3>
                    <p><span>¥</span> 899</p>
                </a>
            </li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>












    
    <footer>
        <!-- 宣传服务 -->
        <div class="xtx-service">
            <!-- 版心 -->
            <div class="container">
                <a href="">价格亲民</a>
                <a href="">物流快捷</a>
                <a href="">品质新鲜</a>
            </div>

        </div>
        <!-- 版权信息 -->
        <div class="xtx-copyright">
            <div class="container">
                <p>
                    <a href="">关于我们</a>|
                    <a href="">帮助中心</a>|
                    <a href="">售后服务</a>|
                    <a href="">配送与验收</a>|
                    <a href="">商务合作</a>|
                    <a href="">搜索推荐</a>|
                    <a href="">友情链接</a>
                </p>
                <p>CopyRight @ 小兔鲜儿</p>
            </div>
        </div>
    </footer>
    
</body>
</html>